<template>
  <div v-transfer-dom>
    <popup v-model="isShow" position="bottom" height="75%" :class="{popup:this.hasNav}">
      <div class="top">
        <div class="left"><img :src="product.image" /></div>
        <div class="right">
          <p class="moneys">￥{{product.price}}</p>
          <p>库存 {{product.inventory}}件</p>
          <p v-if="chooseProduct()">
            请选择
            <span v-for="(specification,index) in product.specification_items"> {{specification.name}} </span>
          </p>
          <p v-else>
            <span>已选择: {{entriesString}}</span>
          </p>
        </div>
      </div>
      <div class="classification">
        <ul>
          <li v-for="(specification,indexs) in product.specification_items">
            <p>{{specification.name}}</p>
            <ul class="contain">
              <li 
              	v-for="(entry,index) in specification.entries" 
              	v-if="entry.isSelected" 
              	:class="{active:products[indexs]==entry.value, disabled:cannotSelected[entry.value]}"
               @click="choose(entry.value,indexs)">
               {{entry.value}}
              </li>
            </ul>
          </li>
          <li>
            <p class="relative">购买数量
              <inline-x-number :min='1' class='changeNum' v-model='quantity'></inline-x-number>
            </p>
          </li>
        </ul>
      </div>
      <div class="btnBottom">
        <x-button class='btn' style="background: orangered;" @click.native='addCart'>确定</x-button>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup, XButton, InlineXNumber } from 'vux'
import Data from '@/server/server.js'

export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
    XButton,
    InlineXNumber
  },
  props: {
    hasNav: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: false,
      route: '',
      product: [],
      products: ['', ''],
      entriesString: '',
      quantity: 1,
      cannotSelected: {},
      specLength: ''
    }
  },
  computed: {
    entry() {
      this.products = this.$store.state.products
      this.entriesString = this.products.toString().replace(/,/g, " ")
    }
  },
  methods: {
    choose(val, index, id) {
      var storeValue = this.$store.state.products[index],
        submitVal = storeValue == val ? '' : val
      this.chooseSpecifications(val, index, storeValue) // 选规格
      this.products = []
      this.$parent.product = []
      this.$store.commit({
        type: 'changeEntrys',
        indexs: index,
        value: submitVal
      })
    },
    chooseSpecifications(val, index, storeValue) {
      Data.specification.then(data => {
        this.specLength = data.specLength
        var arr = []
        arr[index] = val
        this.product.specification_items.forEach((item, indexs) => {
          // 根据点击取 待选择尺寸的数据
          if (indexs != index) {
            item.entries.forEach((childVal, childIndex) => {
              arr[indexs] = childVal.value
              var vliad =
                data[arr] != 'true' && storeValue != val ? true : false
              this.cannotSelected[childVal.value] = vliad
            })
          }
        })
      })
    },
    addCart() {
      let num = 0
      this.isShow = false
      this.$store.state.products.forEach(value => {
        if (value != '' && value != undefined) {
          num++
        }
      })
      if (num < this.specLength) return;
			
      if (this.route) {
        this.$router.push(this.route)
      } 
      else {
        this.$parent.showPosition('middle')
      }
    },
    init() {
      Data.popup.then(data => {
        this.product = data
      })
    },
    chooseProduct (){
      let num = 0
      this.$store.state.products.forEach(value => {
        if (value != '' && value != undefined) {
          num++
        }
      })
      return num < this.specLength;
    }
  },
  watch: {
    entry() {}
  },
  mounted() {
    this.init()

  }
}
</script>

<style scoped="scoped">
.btnBottom {
  width: 100%;
  height: 2.65rem;
  position: absolute;
  bottom: 0;
  z-index: 99;
}

.btn {
  width: 100%;
  margin: 0 !important;
  color: white;
}

.top {
  width: 100%;
  height: 6rem;
  position: absolute;
  top: 0%;
  z-index: 100;
  height: 6rem;
  background: white;
  border-bottom: 2px solid gainsboro;
}

.top .left,
.top .right {
  float: left;
}

.top .right {
  padding-left: 5%;
  width: 65%;
}

.top .left {
  width: 30%;
  height: 100%;
  text-align: right;
  margin-bottom: 10px;
}

.top .left img {
  width: 80%;
  height: 90%;
  border: 2px solid white;
  border-radius: 10px;
}

.money {
  color: red;
}

.classification {
  width: 100%;
  margin-top: 6rem;
  height: 70%;
  background: white;
}

.classification > ul {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  overflow-y: scroll;
}

.classification > ul > li {
  border-bottom: 1px solid gainsboro;
  padding: 10px 0 20px 0;
}

.classification ul {
  list-style: none;
}

.contain li {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f0f0;
  border-radius: 5px;
  margin-top: 10px;
  margin-right: 5px;
}

.contain .active {
  background: orangered;
  color: white;
}

.relative {
  position: relative;
}

.changeNum {
  position: absolute;
  right: 0;
  color: black;
}

.vux-number-selector svg {
  color: red !important;
}

::-webkit-scrollbar {
  display: none;
}

.popup {
  margin-bottom: 3rem;
}

.right p.moneys {
  color: orangered;
}

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
</style>